<template>
  <div>
    <div class="playVideo">
      <!-- <h3>选择流快速填写:</h3> -->
      <el-form ref="form" :model="form" label-width="140px">
        <el-form-item>
          <span slot="label">
            <span class="form_label">选择流快速填写: </span>
          </span>
          <el-select
            @change="change"
            v-model="tableData.name"
            placeholder="请选择流名称"
          >
            <el-option
              v-for="item in tableData"
              :key="item.id"
              :index="item.id"
              :label="item.name"
              :value="item.url"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="videoAddr">
          <el-form-item>
            <span slot="label">
              <span class="play_label">播放地址: </span>
            </span>
            <el-input v-model="input"></el-input>
          </el-form-item>
          <el-button @click="play" type="primary">播放</el-button>
        </div>
      </el-form>
    </div>
    <div id="mse"></div>
  </div>
</template>
<script>
// import Player from "xgplayer";
import FlvJsPlayer from 'xgplayer-flv.js';
import { getUrl } from "../src/api";
export default {
  data() {
    return {
      tableData: {},
      value: {},
      checked: false,
      player: null,
      form: {
        id: "",
        name: "",
        url: "",
      },
      input: "",
    };
  },
  mounted() {
    this.player = new FlvJsPlayer({
        id: "mse",
        // url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv",
        url: "",
        width: 1200,
        height: 675,
      });

    this.getList();
  },
  methods: {
    //获取列表的数据
    getList() {
      getUrl({params: { page: 1, limit: 100000000}}).then(
        ({ data }) => {
          //拿到所有流数据
          this.tableData = data.data.stream_list;
        }
      );
    },
    change(val) {
      //将对应的流地址显示到input框
      this.input = val;
      this.form.url = val;
    },
    play() {
      //点击播放按钮自动播放
      this.player.src = this.input;
      this.player.start(this.input);            
    },
  },
};
</script>
<style lang="less" scoped>
.playVideo {
  display: flex;
  align-content: center;
  .el-select {
    margin: 0px 60px;
    width: 800px;
  }
  .form_label {
    font-size: 17px;
    font-weight: 700;
  }
  
}
.videoAddr {
  display: flex;
  .el-input {
    margin: 0px 60px;
    width: 800px;
  }
  .el-button {
    height: 40px;
  }
  .play_label {
    font-size: 17px;
    font-weight: 700;
    text-align: left; //没生效
  }
}
</style>